<script>
/**
 * 分享应用模块
 */
export default {
  name: 'Share',
  props: {
    title: {
      //标题
      type: String,
      default() {
        return '分享应用';
      },
    },
    tip: {
      //提示信息
      type: String,
      default() {
        return '请使用扫一扫功能扫码二维码';
      },
    },
    uri: {
      //分享地址
      type: String,
      default() {
        return window.location.href;
      },
    },
    showSaveAs: {
      //是否显示保存为图片
      type: Boolean,
      default() {
        return true;
      },
    },
  },
  methods: {
    showApp() {
      const { href } = this.$router.resolve({
        name: 'PreviewAppContent',
        params: { id: this.$store.state.app.appData.id },
      });
      window.open(href, '_blank');
    },
  },
};
</script>

<template>
  <div class="share-container">
    <h3>{{ title }}</h3>
    <QrCode
      :value="uri"
      :width="200"
      :height="200"
      :download="showSaveAs"/>
    <span
      class="open-app"
      @click="showApp">查看应用</span>
    <p>{{ tip }}</p>
  </div>
</template>

<style lang="less">
.share-container {
  text-align: center;
  font-size: 14px;
  > h3 {
    font-size: 16px;
    font-weight: normal;
  }
  > p {
    margin-top: 3px;
  }
  .k-qrcode {
    /deep/ img {
      margin: 10px auto;
    }
    /deep/ a {
      margin-left: -76px;
    }
  }

  .open-app {
    position: absolute;
    bottom: 40px;
    right: 70px;
    cursor: pointer;
    color: #2d8cf0;
  }
}
</style>
